<template>
  <div v-show="$route.name == 'goods-update'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods-list' }">商品列表
    </el-breadcrumb-item>
      <el-breadcrumb-item>商品编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">商品详情</div>
      <el-form :model="goods" :rules="rules" ref="goods" label-width="100px" class="demo-orderForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="商品ID" prop="id">
              <el-input v-model="goods.id" disabled style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="goods.name" disabled style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="品类" prop="process">
              <el-select v-model="goods.process" disabled popper-class="dropdownbox" filterable style="width:200px" >
                <el-option v-for="item in processList" :label="item.label"
                  :value="item.value" :key="item.value">
                  <span style="float: left">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="category_id">
              <el-select v-model="goods.category_id" :disabled="groupid === 0 ? false : true" popper-class="dropdownbox" filterable style="width:200px" >
                <el-option v-for="item in categoryList" :label="item.category_name"
                  :value="item.id" :key="item.id">
                  <span style="float: left">{{ item.category_name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="goods.process ? '参考成本' : '默认进货价'" prop="price_in">
              <el-input-number controls-position="right" :precision="2" :step="1" v-model="goods.price_in" placeholder="请输入默认进货价" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="进货单位" prop="unit_in">
              <el-input v-model="goods.unit_in" placeholder="请输入进货单位，如：箱、斤、个" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="是否可销售" prop="sellable">
              <el-radio-group v-model="goods.sellable">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="转换比例" prop="conversion">
              <el-input-number controls-position="right" :precision="2" :step="1" :min="0" v-model="goods.conversion" placeholder="请输入转换比例" style="width:200px" :disabled="goods.process ? true : false"></el-input-number>
              <el-alert title="请输入转换比例，如：10，代表1个进货单位=10个销售单位" type="warning" show-icon style="width: 500px;height: 30px;margin-top: 5px;margin-bottom: 28px;"></el-alert>
            </el-form-item>
            <el-form-item label="销售名称" prop="sale_name">
              <el-input v-model="goods.sale_name" placeholder="请输入销售名称" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="销售售价" prop="price">
              <el-input-number controls-position="right" :precision="2" :step="1" v-model="goods.price" placeholder="请输入销售售价" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="销售单位" prop="unit">
              <el-input v-model="goods.unit" placeholder="请输入销售单位，如：箱、斤、个" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button  @click="back" style="margin-left: 5px">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        id: '',
        groupid: '',
        goods: {},
        categoryList:[],
        processList: [
          {
            value: 0,
            label: '原料'
          },
          {
            value: 1,
            label: '成品'
          }
        ],
        rules: {
          price_in: [
            { required: true, message: '请输入默认进货价', trigger: 'blur' }
          ],
          unit: [
            { required: true, message: '请输入进货单位', trigger: 'blur' }
          ],
          sale_name: [
            { required: true, message: '请输入销售名', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入销售售价', trigger: 'blur' }
          ],
          unit_in: [
            { required: true, message: '请输入销售单位', trigger: 'blur' }
          ],
          sellable: [
            { required: true, message: '请选择是否可销售', trigger: 'change' }
          ],
          conversion: [
            { required: true, message: '请输入转换比例', trigger: 'blur' }
          ],
          category_id: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
        }
      }
    },
    mounted() {
      this.getUserInfo()
      this.getCategoryList()
      this.getGoodsData()
    },
    methods: {
      // 获取用户信息
      async getUserInfo() {
        const { data: result } = await this.$http.get('/user/' + localStorage.userid)
        if (result.status !== 200) return this.$message.error(result.msg)
        this.groupid = result.data.groupid * 1
      },
      // 获取商品信息
      async getGoodsData() {
        if (this.$route.params.id) {
          this.id = this.$route.params.id
          localStorage.setItem('goodsId', this.$route.params.id)
        } else {
          this.id = localStorage.getItem('goodsId')
        }
        if (this.id) {
          // 发起编辑的网络请求
          const { data: result } = await this.$http.get('/goods/' + this.id)
          if (result.status !== 200) {
            return this.$message.error(result.msg)
          }
          this.goods = result.data
        }
      },
      // 获取分类
      async getCategoryList() {
        const { data: result } = await this.$http.get('/category')
        if (result.status !== 200) return this.$message.error(result.msg)
        this.categoryList = result.data
      },
      back () {
        localStorage.removeItem('goodsId')
        this.$router.push({'name': 'goods-list'})
      },
      async handleSubmit() {
        this.$refs.goods.validate(async (valid) => {
          if (!valid) return
          let data = {
            name: this.goods.name,
            process: this.goods.process,
            category_id: this.goods.category_id,
            price_in: this.goods.price_in,
            unit_in: this.goods.unit_in,
            sellable: this.goods.sellable,
            conversion: this.goods.conversion,
            sale_name: this.goods.sale_name,
            price: this.goods.price,
            unit: this.goods.unit
          }
          // 可以发起新增入库单的网络请求
          const { data: result } = await this.$http.put('/goods/' + this.id, data)
          if (result.status !== 200) {
            return this.$message.error(result.msg)
          }
          this.$message.success('保存成功！')
          this.$router.push({ path: '/goods-list' })
        })
      }
    }
  }
</script>


